<template>
  <div>
    <div class="container">
      <div class="top">
        <div class="image">
          <div
            class="image-container"
            v-for="(item, index) in announcementList"
            :key="index"
            :style="{ '--index': updateDelay(index) }"
            :class="{ show: index === currentImageIndex }"
          >
            <img
              v-lazy="item.image"
              alt=""
              class="carouselImage"
              loading="lazy"
            />
          </div>
        </div>
        <div class="announcement">
          <div class="area">
            <ul class="circles">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
          <div style="width: 100%">
            <div
              class="anno1"
              v-for="(item, index) in announcementList"
              :key="index"
              @mouseover="
                currentImageIndex = index;
                hoverIndex = index;
              "
              @mouseout="hoverIndex = 0"
            >
              <div class="right">
                <div
                  class="announcementDeil"
                  @click="$router.push(`noticeDetails?id=${item.id}`)"
                >
                  <div class="frame" v-if="item.type == 1">[活动]</div>
                  <div class="frame" v-if="item.type == 0">[公告]</div>
                  <div class="frame hide" v-if="item.isTop == 1">[置顶]</div>

                  <!-- <div class="frame" v-if="item.isTop == 1">[置顶]</div> -->

                  <svg-icon
                    icon-class="rearRightArrow"
                    class="RightArrowrear"
                  />
                  <svg-icon
                    icon-class="frontRightArrow"
                    class="RightArrowfront"
                  />
                  <div class="announContent">
                    <div class="title">{{ item.title }}</div>
                    <div class="s">
                      <div class="time">
                        <template>
                          <div>
                            {{ formattedDate(item.gmtCreate) }}
                          </div>
                        </template>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- <div class="announcementDividingLine"></div> -->
                <!-- <img src="../../assets/img/公告分割线.png" alt="" > -->
              </div>
            </div>
          </div>
          <div class="pageNumber">
            <!-- 0为页数减少 -->
            <div class="left" @click="handleCurrentChange(0)">
              <!-- 黑色 -->
              <svg-icon icon-class="frontpageright" class="frontleftpage" />
              <!-- 蓝色 -->
              <svg-icon icon-class="rearpageright" class="rearleftpage" />
            </div>

            <div class="page">
              <span
                v-for="(item, index) in noticeNumberOfPages"
                :key="index"
                style="padding: 5px"
                :class="{
                  gray: item !== noticePage,
                  black: item === noticePage,
                }"
                >{{ item }}</span
              >
            </div>
            <!-- 1为页数增加 -->
            <div class="right" @click="handleCurrentChange(1)">
              <!-- 黑色 -->
              <svg-icon icon-class="frontpageright" class="frontrightpage" />
              <!-- 蓝色 -->
              <svg-icon icon-class="rearpageright" class="rearrightpage" />
            </div>
          </div>
        </div>
      </div>
      <el-dialog
        :append-to-body="true"
        title="欢迎报名"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
        center
      >
        <el-form
          :model="activityInfo"
          :rules="rules"
          ref="activityInfo"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名" prop="name" size="samll" class="inpbox">
            <el-input v-model="activityInfo.name"></el-input>
          </el-form-item>
          <el-form-item
            label="手机号"
            prop="phone"
            v-model="activityInfo.phone"
            class="inpbox"
          >
            <el-input
              v-model.number="activityInfo.phone"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender" class="inpbox">
            <el-radio-group v-model="activityInfo.gender">
              <el-radio :label="0">男</el-radio>
              <el-radio :label="1" style="margin-left: 10px">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="所属院系" required style="margin-top: 5px">
            <el-col :span="11">
              <el-form-item prop="collegeId">
                <el-select
                  filterable
                  v-model="activityInfo.collegeId"
                  placeholder="请选择学院"
                  @change="colleageChanged(activityInfo.collegeId)"
                >
                  <el-option
                    v-for="(item, index) in collegeAndMajor"
                    :key="index"
                    :label="item.collegeName"
                    :value="item.collegeId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col class="lines" :span="2" style="text-align: center"
              >-</el-col
            >
            <el-col :span="11">
              <el-form-item prop="majorId">
                <el-select
                  v-model="activityInfo.majorId"
                  placeholder="请选择专业"
                >
                  <el-option
                    filterable
                    v-for="(item, index) in majorList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="班级" prop="sClass" size="samll" class="inpbox">
            <el-input v-model="activityInfo.sClass"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              id="elbox"
              type="primary"
              @click="submitForm('activityInfo')"
              v-loading.fullscreen.lock="fullscreenLoading"
              >立即报名</el-button
            >
            <el-button id="resetForm" @click="resetForm('activityInfo')"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
      <div class="low">
        <div class="book" v-for="(item, index) in activitieList" :key="index">
          <div class="bookmark">
            <div class="line"></div>
            <div class="status">
              {{ item.statusName }}
            </div>
          </div>
          <div class="type">{{ item.subject }}</div>
          <div class="dcpbox">
            <div class="active-content">活动描述:</div>
            <div class="content">
              {{ item.description }}
            </div>
          </div>
          <div class="bottom">
            <div class="z">
              <div class="time-box">
                <div class="time">活动地点:</div>
                <div class="activeTimeLayout">
                  <p class="activeAddress">
                    {{ item.address }}
                  </p>
                </div>
              </div>
              <div class="time-box">
                <div class="time">报名时间:</div>
                <div class="activeTimeLayout">
                  <p class="activeTime" style="margin-left: 10px">
                    <template>
                      <div>
                        {{ formattedDate(item.joinStart) }}
                      </div>
                    </template>
                  </p>
                  <p>&nbsp; - &nbsp;</p>
                  <p class="activeTime">
                    <template>
                      <div>
                        {{ formattedDate(item.joinEnd) }}
                      </div>
                    </template>
                  </p>
                </div>
              </div>
              <div class="time-box">
                <div class="time">活动时间:</div>
                <div class="activeTimeLayout">
                  <p class="activeTime" style="margin-left: 10px">
                    <template>
                      <div>
                        {{ formattedDate(item.activityStart) }}
                      </div>
                    </template>
                  </p>
                  <p>&nbsp; - &nbsp;</p>
                  <p class="activeTime">
                    <template>
                      <div>
                        {{ formattedDate(item.activityEnd) }}
                      </div>
                    </template>
                  </p>
                </div>
              </div>
            </div>
            <center>
              <div class="y">
                <div class="down" v-show="item.isCountDown">
                  <CountDown :stopTime="item.joinStart"></CountDown>
                </div>
                <div class="button-wrapper" v-show="!item.isCountDown">
                  <div v-show="item.joinStatus === 0">
                    <button>名额已满</button>
                    <p style="font-size: 10px">
                      非常抱歉，名额不足，欢迎下次再来
                    </p>
                  </div>
                  <div v-show="item.joinStatus === 2">
                    <button @click="handleOtherAction(item.id)">
                      提交报名信息
                    </button>
                    <p style="font-size: 10px">
                      您已抢到名额，15分钟内有效，请尽快提交报名信息
                    </p>
                  </div>
                  <div v-show="item.joinStatus === 3">
                    <button>排队中</button>
                    <p style="font-size: 10px">活动热门请等待</p>
                  </div>
                  <div v-show="item.joinStatus === 4">
                    <button @click="tosee(item.id)">查看报名</button>
                    <p style="font-size: 10px">您已报名成功</p>
                  </div>
                  <div v-show="item.joinStatus === 5">
                    <button @click="openDialog(item.id)">抢名额</button>
                  </div>
                  <div v-show="item.joinStatus === -1">
                    <button @click="eventEnded">报名已结束</button>
                  </div>
                  <div v-show="item.joinStatus === -2">
                    <button @click="eventEnded">活动已结束</button>
                  </div>
                </div>
              </div>
            </center>
          </div>
        </div>
        <div style="width: calc(50% - 10px)">
          <el-carousel trigger="click" height="415px">
            <el-carousel-item
              v-for="(item, index) in noticeList[2]"
              :key="index"
            >
              <div class="bannnerImage-container">
                <img
                  v-lazy="item.image"
                  alt=""
                  class="carouselImage"
                  loading="lazy"
                />
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import banner from '../api/cms/banner.js'

import { banner, getAnnouncementList } from "@/api/cms/cms";
import {
  getQualifications,
  addJoinActivity,
  checkActivityStatus,
  getCurrentTime,
} from "../../api/activity";
import CryptoJS from "crypto-js";
// import { mapState } from "vuex";
//倒计时组件
import CountDown from "@/utils/countDown.vue";

export default {
  name: "noticeList",
  components: {
    CountDown,
  },
  props: {
    noticeList: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      dialogVisible: false,
      collegeAndMajor: "",
      userId: "",
      isDistinguish: false, //区分两个活动
      currentTime: "", //现在服务器的时间
      fullscreenLoading: false, //活动报名表单的控制加载
      isSee: false, // 控制去查看按钮状态
      strIdReady: false,
      a: false,
      encryptedStr: "",
      activityId: "", //活动1的id
      strId: "",
      majorList: [],
      activityInfo: {
        userId: "",
        sClass: "",
        activityId: "",
        name: "",
        alimit: 0, //活动人数限制
        gender: 0,
        phone: "",
        majorId: "",
        collegeId: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
          {
            min: 2,
            max: 5,
            message: "长度在 2 到 5 个字符",
            trigger: "blur",
          },
        ],
        alimit: [
        {
            type: 'number',
            min: 0,
            message: '数值不能小于0',
            trigger: 'blur'
          }
        ],
        collegeId: [
          {
            required: true,
            message: "请选择学院",
            trigger: "blur",
          },
        ],
        majorId: [
          {
            required: true,
            message: "请选择专业",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号码格式不正确",
          },
        ],
        gender: [
          {
            required: true,
            message: "请选择性别",
            trigger: "blur",
          },
        ],
        sclass: [
          {
            required: true,
            message: "请输入班级",
            trigger: "blur",
          },
          {
            min: 3,
            message: "长度最少3字符",
            trigger: "blur",
          },
        ],
      },
      bannerList: [], //轮播图数据
      announcementList: [], //公告列表
      activitieList: [], //活动列表
      //公告分页数据
      noticePage: 1,
      noticeLimit: 7,
      noticeTotal: 0,
      noticeNumberOfPages: [], //公告分页数
      hoverIndex: 0, // 当前鼠标悬停的公告的索引
      activeIndex: 0, // 公告轮播图初始显示的索引
      currentImageIndex: 0,
      intervalIds: [] //定时器数组
    };
  },
  created() {
    this.getActivity();
  },
  mounted() {
    this.getUserId();
    this.getColInfo();
    this.getAnnouncement();
  },
  beforeDestroy() {
  // 停止所有的定时器
  this.intervalIds.forEach(intervalId => {
    clearInterval(intervalId);
  });
  this.intervalIds = [];
},
  watch: {
    hoverIndex() {
      this.activeIndex = this.hoverIndex;
    },
  },
  methods: {
    eventEnded() {
      this.$message.warning(
        "报名已经结束，但请继续关注我们的后续活动，下次机会不要错过哦！"
      );
    },
    async fetchData(activity) {
      await this.getCurrentTime();
      //获取活动状态
      const activity1 = this.activitieList.find(
        (item) => item.id === activity.id
      );
      activity1.isCountDown = false;
      if (
        new Date(this.currentTime).getTime() >
          new Date(activity.joinStart).getTime() &&
        new Date(this.currentTime).getTime() <
          new Date(activity.joinEnd).getTime()
      ) {
        //报名中
        checkActivityStatus(activity.id)
          .then((res) => {
            if (res.code === 20000) {
              activity1.joinStatus = res.data.status;
            }
          })
      } else if (
        new Date(this.currentTime).getTime() >
          new Date(activity.joinEnd).getTime() &&
        new Date(this.currentTime).getTime() <
          new Date(activity.activityStart).getTime()
      ) {
        activity1.joinStatus = -1;
      } else if (activity.status === 3) {
        activity1.joinStatus = -2;
      } else {
        //不可报名显示倒计时
        activity1.isCountDown = true;
      }
    },
    getCurrentTime() {
      getCurrentTime().then((res) => {
        if (res.code === 20000) {
          this.currentTime = res.data.date;
        }
      });
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 检查alimit值是否大于15，如果大于则不发送请求
          if (this.activityInfo.alimit && this.activityInfo.alimit > 15) {
        this.$message.warning("alimit值已超过15，不再发送请求");
        return; // 终止方法执行
      }
          addJoinActivity(this.activityInfo).then((res) => {
            if (res.code === 20000) {
              this.activityInfo.alimit += 1;
              this.fullscreenLoading = true;
              setTimeout(() => {
                this.fullscreenLoading = false;
              }, 2000);  // 提交后加载2秒再完成，避免因网络不好而频繁点击
              this.$message.success("报名成功！");
              this.$router.push("/");
            } else {
              this.$message.error(res.data.message);
            }
          });
        } else {
          this.$message.error("请检查是否输入正确的数据");
        }
      });
      this.dialogVisible = false; // 打开对话框
    },
    resetForm(activityInfo) {
      this.$refs[activityInfo].resetFields();
    },
    openDialog(activityId) {       //抢名额
      this.getUserId();
      this.activityId = activityId; //获取相对应的activityId
      this.activityInfo.activityId = activityId; //报名表单获取相对应的activityId
      this.encryptMD5();
      this.getQualification();
      console.log(this.activityId);
      this.strIdReady = true; // 设置md5ID准备好
      const activity = this.activitieList.find(
        (item) => item.id === this.activityId
      );
      if (activity) {
        activity.isDistinguish = !activity.isDistinguish; // 区分活动
      }
      this.$message.success("已抢到报名资格，请尽快提交报名表，15分钟后失效");
    },
    handleOtherAction(activityId) {
      this.dialogVisible = true; // 打开对话框
      this.activityInfo.activityId = activityId;
      const activity = this.activitieList.find(
        (item) => item.id === this.activityId
      );
      if (activity) {
        activity.isDistinguish = !activity.isDistinguish; // 区分活动
      }
    },

    tosee() {
      //查看报名
      this.$router.push(`/userInfoForm`);
      this.$message.success("请准时参与");

      // this.dialogVisible = true; // 打开对话框
    },
    getActivity() {
      // 获取活动信息
      this.$store.dispatch("queryActivity").then(() => {
        // 使用map方法处理活动列表，添加额外的状态信息
        this.activitieList = this.$store.state.activitieList.map(activity => ({
          ...activity,
          isDistinguish: true, // 区分活动
          joinStatus: 5, // 状态
          isCountDown: true, // 用来显示活动结束的按钮
        }));

        // 使用forEach遍历活动列表，为每个活动创建一个定时器
        this.activitieList.forEach((activity, index) => {
          this.intervalIds[index] = setInterval(this.fetchData.bind(this, activity), 1000);
          console.log(`新定时器${index + 1}`, this.intervalIds[index]);
        });
      });
    },
    getUserId() {
      //获取用户id
      this.$store.dispatch("queryUser").then(() => {
        this.userId = this.$store.state.userInfo.id;
        this.activityInfo.userId = this.userId;

        if (this.activityId !== null && this.userId !== null) {
          this.strIdReady = true;
          this.encryptMD5();
        }
        //console.log(this.$store.state.userInfo.id); // 这里应该能获取到数据
      });
    },

    encryptMD5() {
      this.strId = this.activityId + this.userId;
      console.log("1111111", this.strId);
      this.encryptedStr = CryptoJS.MD5(this.strId).toString();
      // 在控制台输出加密后的字符串
      console.log(this.encryptedStr);
    },
    getQualification() {
      getQualifications(this.activityId, this.encryptedStr).then((res) => {
        if (res.code === 20000 || res.code === 20001) {
          console.log("Success:", res.message); // 打印成功消息
        } else {
          this.$message.error(res.message || "获取资格信息失败");
        }
      });
    },
    handleClose(done) {
      done();
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done();
      //   })
      //   .catch(_ => { });
    },
    colleageChanged(value) {
      for (let i = 0; i < this.collegeAndMajor.length; i++) {
        if (this.collegeAndMajor[i].collegeId === value) {
          this.majorList = this.collegeAndMajor[i].majorList;
          this.activityInfo.majorId = "";
        }
      }
    },
    getColInfo() {
      this.$store
        .dispatch("queryCollege")
        .then(() => {
          this.collegeAndMajor = this.$store.state.collegeAndMajor;
          for (let i = 0; i < this.collegeAndMajor.length; i++) {
            if (
              this.collegeAndMajor[i].collegeId === this.activityInfo.collegeId
            ) {
              this.majorList = this.collegeAndMajor[i].majorList;
            }
          }
          console.log(this.$store.state.collegeAndMajor); // 这里应该能获取到数据
        })
        .catch((error) => {
          console.error("获取学院专业列表失败", error);
        });
    },
    updateDelay(index) {
      return index * 0.1;
    },
    formattedDate(time) {
      const date = new Date(time);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      const hours = date.getHours().toString().padStart(2, "0");
      const minutes = date.getMinutes().toString().padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },
    //获取轮播图
    /*     getBanner() {
          banner().then((res) => {
            if (res.code == 20000) {
              this.bannerList = res.data.bannerList;
            }
          });
        }, */
    //公告分页变化
    handleCurrentChange(changeId) {
      if (changeId === 0 && this.noticePage !== 1) {
        //页数增加时减少时
        this.noticePage--;
        this.getAnnouncement();
      }
      if (changeId === 0 && this.noticePage == 1) {
        //当已经是第一页时，点击换页按钮，页数增加时减少时
        // this.$message.warning("已经是第一页了");
      }
      if (
        changeId === 1 &&
        this.noticePage !== this.noticeNumberOfPages.length
      ) {
        //页数增加时增加时
        this.noticePage++;
        this.getAnnouncement();
      }
      if (
        changeId === 1 &&
        this.noticePage === this.noticeNumberOfPages.length
      ) {
        //当已经是最后一页时，点击换页按钮，页数增加时减少时
        // this.$message.warning("已经是最后一页了");
      }
    },
    //获取公告
    getAnnouncement() {
      getAnnouncementList(this.noticePage, this.noticeLimit).then((res) => {
        if (res.code === 20000) {
          this.announcementList = res.data.list.records;
          this.noticeTotal = res.data.list.total;
          let pages = Math.ceil(this.noticeTotal / this.noticeLimit);
          for (let i = 0; i < pages; i++) {
            if (this.noticeNumberOfPages.length < pages) {
              this.noticeNumberOfPages.push(i + 1);
            }
          }
        }
      });
    },
  },
};
</script>

<style scoped>
.inpbox {
  margin-top: 5px;
}

#elbox {
  margin-top: 20px;
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

/* From Uiverse.io by eslam-hany */
#resetForm {
  position: absolute;
  top: 0;
  right: 92px;
  margin-top: 20px;
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.container {
  animation-name: Up;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  width: 100%;
  height: 850px;
  padding-top: 5px;
  padding-bottom: 50px;
  background-color: rgba(220, 220, 220, 0.45882);
}

/* 分为上下 */
.container .top,
.container .low {
  height: 400px;
  margin: 35px 35px 0px 35px;
  display: flex;
  justify-content: space-between;
}

.container .top .image {
  height: 400px;
  width: calc(50% - 10px);
  overflow: hidden;
  position: relative;
}

.container .top .announcement,
.container .low .images {
  height: 400px;
  width: calc(50% - 10px);
  overflow: hidden;
  position: relative;
}

.container .low .race {
  height: 400px;
  width: calc(50% - 10px);
}

.container .top .announcement,
.container .low .images {
  margin-left: 35px;
}

.announcement {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

/* 第一层右边公告栏部分 */
.container .top .announcement .anno {
  background-color: #91bce7;
  height: 40px;
  font-size: 20px;
  color: #313743;
  line-height: 50px;
  padding-left: 80px;
}

/* 第一层右边正文第一层部分 */
.container .top .announcement .anno1 {
  z-index: 2;
  position: relative;
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0);
}

.container .top .announcement .anno1:hover {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}

.container .top .announcement .anno1 .left {
  float: left;
}

.container .top .announcement .anno1 .left img {
  height: 118px;
  width: 80px;
  object-fit: cover;
}

.container .top .announcement .anno1 .right .s {
  display: flex;
  width: 15vw;
}

.announcementDeil .frame {
  display: inline-block;
  width: 50px;
}

.container .top .announcement .anno1 .right .s .time {
  height: 40px;
  float: right;
  top: 30px;
  right: 5px;
  text-align: right;
  padding: 3px;
  line-height: 40px;
  font-size: 18px;
  width: 170px;
}

.container .top .announcement .anno1 .right .title {
  height: 40px;
  width: 24vw;
  padding: 3px;
  line-height: 40px;
  font-size: 18px;
}

.time-box {
  display: flex;
  width: 350px;
  align-items: center;
}

.activeTimeLayout {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  line-height: 30px;
}

.activeTime {
  font-size: 14px;
  text-align: left;
}

.activeTimeContainer {
  position: absolute;
  display: flex;
  bottom: 8vw;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.registrationTimeConntainer {
  position: absolute;
  display: flex;
  bottom: 6vw;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.addressContainer {
  position: absolute;
  display: flex;
  bottom: 10vw;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.countDown {
  position: absolute;
  bottom: 2vw;
  left: 3vw;
}

.activeAddress {
  font-size: 14px;
  text-align: left;
  margin-left: 20px;
}

.pageNumber {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  z-index: 1;
  margin-right: 5px;
}

.pageNumber a {
  display: inline-block;
  box-sizing: border-box;
  width: 15px;
  text-decoration: none;
  color: #0e0d0d;
}

/* 第一层右边正文第二层部分 */
.container .top .announcement .anno2 {
  border: 1px solid #fff;
  height: 120px;
  float: left;
}

.container .top .announcement .anno2 .left {
  float: left;
}

.container .top .announcement .anno2 .left img {
  height: 116px;
  width: 80px;
  object-fit: cover;
}

.container .top .announcement .anno2 .right .s {
  display: flex;
  justify-content: space-between;
}

.container .top .announcement .anno2 .right .s .time,
.container .top .announcement .anno2 .right .s .title {
  height: 20px;
  width: calc(50% - 10px);
  margin: 0px 10px 0 10px;
  background-color: #fff;
  line-height: 20px;
  font-size: 18px;
  width: 170px;
}

.container .top .announcement .anno2 .right .x {
  height: 78px;
  margin: 10px 10px 0 90px;
  background-color: #fff;
  line-height: 20px;
  font-size: 18px;
}

/* 第一层右边正文第三层部分 */

.container .top .announcement .anno3 {
  border: 1px solid #fff;
  height: 120px;
  float: left;
}

.container .top .announcement .anno3 .left {
  float: left;
}

.container .top .announcement .anno3 .left img {
  height: 116px;
  width: 80px;
  object-fit: cover;
}

.container .top .announcement .anno3 .right .s {
  display: flex;
  justify-content: space-between;
}

.container
  .top
  .announcement
  .anno3
  .right
  .s
  .time
  .container
  .top
  .announcement
  .anno3
  .right
  .s
  .title {
  height: 20px;
  width: calc(50% - 10px);
  margin: 0px 10px 0 10px;
  background-color: #fff;
  line-height: 20px;
  font-size: 18px;
}

.container .top .announcement .anno3 .right .x {
  height: 78px;
  margin: 10px 10px 0 90px;
  background-color: #fff;
  line-height: 20px;
  font-size: 18px;
}

.announcementDividingLine {
  width: 100%;
  height: 30px;
  background-image: url("@/assets/img/公告分割线.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: -15px;
}

/* 第二层左边部分 */
.book {
  position: relative;
  border-radius: 10px;
  width: 373px;
  height: 410px;
  -webkit-box-shadow: 1px 1px 12px #000;
  box-shadow: 1px 1px 150px rgb(189 189 189 / 33%);
  color: #000;
  justify-content: space-between;
  background-image: url("@/assets/img/活动边框.png");
  background-size: 100% 100%;
  /* 背景图片覆盖整个元素 */
  background-position: center;
  /* 图片居中显示 */
  background-repeat: no-repeat;
  /* 不重复背景图片 */
  padding: 20px 0 0 0;
}

.book .type {
  height: 30px;
  font-size: 25px;
  line-height: 30px;
  font-family: "STXingkai";
  text-align: center;
  margin-top: 1vw;
}

.dcpbox {
  display: flex;
}

.active-content {
  margin-left: 17px;
  font-size: 14px;
  text-align: center;
  line-height: 64px;
}

.book .content {
  height: 120px;
  width: 196px;
  font-size: 18px;
  padding: 20px;
}

.book .bottom .z {
  width: 90%;
  float: left;
  padding: 10px;
  padding-bottom: 0;
}

.book .z .time,
.book .z .place {
  margin-left: 10px;
  font-size: 14px;
  text-align: center;
}

.book .y {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.book .y .down {
  font-size: 18px;
  width: 174px;
}

.book .y .button-wrapper {
  font-size: 18px;
}

.book .background {
  background-color: #7298c3;
  height: 20px;
  width: calc(100%);
}

.bannnerImage-container {
  height: 100%;
  /* 高度设置为视口高度的100% */
  width: 100%;
  /* 宽度设置为100% */
  overflow: hidden;
  /* 隐藏溢出容器的内容 */
  position: relative;
  /* 相对定位 */
}

.image-container {
  height: 100%;
  /* 高度设置为视口高度的100% */
  width: 100%;
  /* 宽度设置为100% */
  overflow: hidden;
  /* 隐藏溢出容器的内容 */
  position: absolute;
  /* 绝对定位 */
}

.carouselImage {
  width: 100%;
  /* 图片宽度设置为100% */
  height: 100%;
  /* 图片高度设置为视口高度的100% */
  /* object-fit: cover; 保持图片宽高比，覆盖整个容器 */
}

.image-container {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  transition-delay: 0s;
  /* 初始时没有延迟 */
  will-change: opacity, transform;
  /* 提示浏览器优化这些属性的动画 */
}

.image-container.show {
  opacity: 1;
  transform: translateX(0);
  transition-delay: calc(0.1s * var(--index));
  /* 使用--index变量来设置延迟 */
}

/* 点击参与活动的按钮 */
button {
  font-family: inherit;
  font-size: 20px;
  background: royalblue;
  color: white;
  padding: 0.7em 1em;
  padding-left: 0.9em;
  display: flex;
  align-items: center;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
  margin-top: 7px;
}

button span {
  display: block;
  margin-left: 0.3em;
  transition: all 0.3s ease-in-out;
}

button svg {
  display: block;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
}

button:hover .svg-wrapper {
  animation: fly-1 0.6s ease-in-out infinite alternate;
}

button:hover svg {
  transform: translateX(1.2em) rotate(45deg) scale(1.1);
}

button:hover span {
  transform: translateX(5em);
}

button:active {
  transform: scale(0.95);
}

@keyframes fly-1 {
  from {
    transform: translateY(0.1em);
  }

  to {
    transform: translateY(-0.1em);
  }
}

.bookmark {
  position: relative;
  width: 100px;
}

.line {
  height: 2px;
  background-color: black;
  width: 100%;
  position: absolute;
  bottom: 0;
  right: -273px;
  transform: rotate(90deg);
  top: 50px;
}

.statusBlue {
  position: absolute;
  justify-content: center;
  align-items: center;
  right: -243px;
  height: 70px;
  background-image: linear-gradient(to bottom right, #84abd1, #b5dbf4);
  box-shadow: 0 0 10px #888;
  width: 20px;
  top: 50px;
  /* 重置top属性 */
  padding: 10px;
  transition: top 0.3s ease;
  /* 添加过渡效果 */
}

.statusYellow {
  position: absolute;
  justify-content: center;
  align-items: center;
  right: -218px;
  height: 70px;
  background-image: linear-gradient(to bottom right, #fe9027, #ffbb5e, #ffe594);
  box-shadow: 0 0 10px #888;
  width: 20px;
  top: 50px;
  /* 重置top属性 */
  padding: 10px;
  transition: top 0.3s ease;
  /* 添加过渡效果 */
}

.statusGreen {
  position: absolute;
  justify-content: center;
  align-items: center;
  right: -218px;
  height: 70px;
  background-image: linear-gradient(to bottom right, #61ad87, #97ce9f, #dbefcb);
  box-shadow: 0 0 10px #888;
  width: 20px;
  top: 50px;
  /* 重置top属性 */
  padding: 10px;
  transition: top 0.3s ease;
  /* 添加过渡效果 */
}

.status {
  position: absolute;
  justify-content: center;
  align-items: center;
  right: -243px;
  height: 70px;
  background-image: linear-gradient(to bottom right, #f94b4a, #fc6363, #ffa4a2);
  box-shadow: 0 0 10px #888;
  width: 20px;
  top: 50px;
  /* 重置top属性 */
  padding: 10px;
  transition: top 0.3s ease;
  /* 添加过渡效果 */
}

.status:hover {
  top: 100px;
  /* 悬停时的top属性值 */
}

.status span {
  color: #fff;
  font: bold 100% "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
  text-shadow: 0 0 5px #444;
}

.announcementDeil {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.announcementDeil:hover .frame {
  width: 50px;
  color: #3db0e0;
}

.announcementDeil:hover .RightArrowfront,
.announcementDeil:hover .RightArrowrear {
  display: inline-block;
}

.announcementDeil:hover .hide {
  display: none;
}

.RightArrowfront,
.RightArrowrear {
  display: none;
}

/* 左 */
.frontleftpage {
  display: inline-block;
  transform: rotate(180deg);
}

.rearleftpage {
  display: none;
  transform: rotate(180deg);
}

.left:hover .frontleftpage {
  display: none;
  cursor: pointer;
}

.left:hover .rearleftpage {
  display: inline-block;
  cursor: pointer;
}

/* 右 */
.frontrightpage {
  display: inline-block;
}

.right:hover .frontrightpage {
  display: none;
  cursor: pointer;
}

.rearrightpage {
  display: none;
}

.right:hover .rearrightpage {
  display: inline-block;
  cursor: pointer;
}

/* .container .top .announcement .anno1 .right .title:hover {
  width: 300px;
} */

.announContent {
  display: flex;
  width: calc(100% - 87px);
  justify-content: space-between;
  align-items: center;
}

/* From Uiverse.io by ke1221 */
button {
  color: #090909;
  font-size: 18px;
  border-radius: 0.5em;
  background: #e8e8e8;
  cursor: pointer;
  border: 1px solid #e8e8e8;
  transition: all 0.3s;
  box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
}

button:active {
  color: #666;
  box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
}

/* 分页数字的颜色 */
.gray {
  color: gray;
}

.black {
  color: black;
}

/* 公告栏背景 */
@import url("https://fonts.googleapis.com/css?family=Exo:400,700");

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: "Exo", sans-serif;
}

.context {
  width: 100%;
  position: absolute;
  top: 50vh;
}

.context h1 {
  text-align: center;
  color: #fff;
  font-size: 50px;
}

.area {
  z-index: 1;
  position: absolute;
  background: #efefef;
  background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
  width: 100%;
  height: 50vh;
}

.circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.circles li {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.8);
  animation: animate 25s linear infinite;
  bottom: -150px;
}

.circles li:nth-child(1) {
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
  background-color: #bde1fb;
}

.circles li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.circles li:nth-child(3) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}

.circles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}

.circles li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
  background-color: #bde1fb;
}

.circles li:nth-child(6) {
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}

.circles li:nth-child(7) {
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}

.circles li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
  background-color: #bde1fb;
}

.circles li:nth-child(9) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}

.circles li:nth-child(10) {
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
  background-color: #bde1fb;
}

@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0;
  }

  100% {
    transform: translateY(-500px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }
}
</style>
